<template>
  <div>
    <table :style="table"
           border="1px"
           cellspacing="0px"
           cellpadding="10px">
      <thead>
        <tr class="table-header">
          <td v-for="(itm, index) in columns"
              :key="index"
              :width="itm.with">{{itm.label}}</td>
        </tr>
      </thead>
      <tbody v-for="(itm, index) in goods"
             :key="index">
        <td>{{ index }}</td>
        <td>{{itm.goodsName}}</td>
        <td>{{itm.quantity}}</td>
        <td>{{itm.signQuantity}}</td>
        <td>{{itm.signExceptionQuantity}}</td>
        <td>
          <span>破损:{{itm.exceptionTypeSplit.damageQuantity || 0}}，</span>
          <span>缺少:{{itm.exceptionTypeSplit.lackQuantity || 0}}，</span>
          <span>丢失:{{itm.exceptionTypeSplit.loseQuantity || 0}}，</span>
          <span>其他:{{itm.exceptionTypeSplit.otherQuantity || 0}}</span>
        </td>
        <td>{{itm.exceptionDesc}}</td>
      </tbody>
    </table>
  </div>
</template>

<script>

const columns = [
  {
    label: "序号",
    with: '40px'
  },
  {
    label: '货物名称'
  },
  {
    label: '数量(件)'
  },
  {
    label: '实签数'
  },
  {
    label: '异常数'
  },
  {
    label: '签收异常'
  },
  {
    label: '异常描述'
  }
]

export default {
  name: 'CertSignTable',
  props: {
    goods: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      columns
    }
  },
  computed: {
    table () {
      return {
        fontSize: '12px',
        width: "100%",
        fontWeight: '500',
        fontFamily: 'DFKai-scrollBy',
        borderCollapse: "collapse",
        margin: "0 auto"
      }
    },
  }
}
</script>

<style>
</style>